<template>
  <el-row type="flex" class="title">
    <el-col :span="24">
      <p class="adminTitle">欢迎您：{{name}} </p>
    </el-col>
    <el-col :span="24" class="loginDate">
      登录时间： {{ loginTime }}
    </el-col>
    <el-col :span="24" class="loginDate">
      当前时间： {{  nowDate  }}
    </el-col>
    <el-col :span="24" class="loginDate">
      登录态失效时间： {{  new Date(expire).toLocaleString()  }}
    </el-col>
  </el-row>
</template>

<script>

import { mapState } from "vuex"

export default {
  name: "PanelDesc",
  props:["name"],
  data() {
    return {
      loginTime:new Date().toLocaleString(),
      nowDate:new Date().toLocaleString()
    }
  },
  mounted() {
     setInterval(()=>{
        this.nowDate = new Date().toLocaleString();
     },1000)
  },
  computed: {
    ...mapState("user",["expire"])
  },
};
</script>

<style lang="scss" scoped>
.title {
  flex-direction: column;
  margin-top: 10px;
}
.adminTitle {
  font : {
    size: 20px;
  }
}

.loginDate {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}
</style>
